<template>

  <div>
    <div>
      <label class="font">
        <el-button type="text" icon="el-icon-back" @click="handleBack()" class="fontBack"
          style="color: black;">返回</el-button>
      </label>
      <label style="margin: 5px;">
        |
      </label>
      <label v-if="Type === 'Add'" class="font">
        添加歌手
      </label>
      <label v-if="Type === 'Update'" class="font">
        修改歌手
      </label>
    </div>
    <div class="container">

      <div style="margin-left: 30px;">

        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">
          <el-form-item label="歌手名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio label=1>男</el-radio>
              <el-radio label=0>女</el-radio>
            </el-radio-group>
          </el-form-item>


          <el-form-item label="出生日期" prop="birth">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.birth"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="地址" prop="location">
            <el-input v-model="form.location"></el-input>
          </el-form-item>
          <el-form-item label="歌手介绍" prop="introduction" >
            <el-input type="textarea" v-model="form.introduction" resize="none" :rows="10"></el-input>
          </el-form-item>

          <div>
            <el-upload :action="upload()" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
              <el-button type="primary">添加图片</el-button>
            </el-upload>

            <div class="block">
              <el-image :src="imageUrl" style="width: 300px; height: 200px;"></el-image>
            </div>
          </div>

        </el-form>
      </div>
      <el-button v-if="Type === 'Add'" type="primary" icon="el-icon-check" class="but"
        @click="handleAdd('form')">添加</el-button>
      <el-button v-if="Type === 'Update'" type="primary" icon="el-icon-check" class="but"
        @click="handleUpdate('form')">修改</el-button>
    </div>
  </div>
</template>

<script>
import { addSinger, SelectSingerById, UpdateById } from '@/api/singer'
export default {


  data() {

    return {
      Type: '',
      imageUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      form: {
        pic: '',
        name: '',
        sex: "1",
        introduction: '',
        birth: '',
        location: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入歌手姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        birth: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        location: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入歌手介绍', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.Type = this.$route.query.id ? 'Update' : 'Add'
    if (this.Type === 'Update') {
      SelectSingerById(this.$route.query.id).then((res) => {
        if (res.data.code === 1) {
          this.form = res.data.data
          this.imageUrl = res.data.data.pic
        }
      })
    }
  },
  methods: {
    handleBack() {
      this.$router.push('/Singer')
    },
    upload() {
      return '/api/admin/common/upload'
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = `${res.data}`;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAdd(form) {

      //进行表单验证
      this.$refs[form].validate((valid) => {
        if (valid) {
          
          const data = { "pic": this.imageUrl, "name": this.form.name, "sex": this.form.sex, "introduction": this.form.introduction, "birth": this.form.birth, "location": this.form.location }
          addSinger(data).then((res) => {
            if (res.data.code === 1) {
              this.$message.success('添加成功')
              this.handleBack()
            }
            else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          this.$message.error('请输入正确的表单项')
        }
      })
    },
    handleUpdate(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = { "pic": this.imageUrl, "name": this.form.name, "sex": this.form.sex, "introduction": this.form.introduction, "birth": this.form.birth, "location": this.form.location ,"id" : this.$route.query.id}
          UpdateById(data).then((res) => {
            if (res.data.code === 1) {
              this.$message.success('修改成功')
              this.handleBack()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          this.$message.error('请输入正确的表单项')
        }
      })
    }
  }
}



</script>

<style scoped>
.container {
  position: relative;
  z-index: 1;
  height: 900px;
  background: #fff;
  padding: 50px;
  border-radius: 4px;
  margin-top: 10px;
  width: 900px;
  margin: auto;
}

.font {
  font-size: 15px;
  font-weight: bolder;
}

.fontBack {
  font-size: 15px;
  font-weight: normal;
}

.img {
  margin-left: 400px;
  margin-bottom: 500px;
  width: 100px;
  left: 50%;
}

.block {
  margin-top: 10px;

}

.form {
  margin-left: 10%;
  width: 50%;
}

.but {
  margin-top: 50px;
  float: right;
  width: 100px;
}
</style>